<template>
  <div>
    <button>PractiseThree</button>
    <ElRow>
      <ElCol :span="6">
        <ElFormItem v-if="billModel.billId" label="单据编号">
          <span>{{ billModel.billId }}</span>
        </ElFormItem></ElCol
      >
      <ElCol :span="8">
        <ElFormItem label="供货人"> <ElInput v-model="billModel.supplier"></ElInput> </ElFormItem
      ></ElCol>
      <ElCol :span="10">
        <ElFormItem label="采购部门"> <ElInput v-model="billModel.applier"></ElInput> </ElFormItem
      ></ElCol>
    </ElRow>
    <ElRow>
      <ElCol :span="6">
        <ElFormItem label="订货时间">
          <ElDatePicker></ElDatePicker>
        </ElFormItem>
      </ElCol>
      <ElCol :span="6" :offset="6">
        <ElFormItem label="订货时间">
          <ElSelect>
            <ElOption label="xxx" value="yyy"></ElOption>
            <ElOption label="xxxx" value="zzz"></ElOption>
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>

    <ElForm style="with: 800px; border: 2px solid red">
      <ElFormItem v-if="billModel.billId" label="订单编号">
        <span>{{ billModel.billId }}</span>
      </ElFormItem>
      <ElFormItem label="供货人"> <ElInput v-model="billModel.supplier"></ElInput></ElFormItem>
      <ElFormItem label="采购部门">
        <ElInput v-model="billModel.applier"></ElInput>
      </ElFormItem>
      <ElDivider></ElDivider>
      <ElButton icon="Delete" type="danger" size="small" @click="removeItems()"></ElButton>
      <ElButton icon="Operation" type="success" size="small" @click="open4add()"></ElButton>
      <ElTable
        :data="billModel.items"
        @selection-change="selectionChange"
        show-summary
        :summary-method="summaryMethod"
      >
        <ElTableColumn type="selection"></ElTableColumn>
        <ElTableColumn prop="itemId" label="编号"></ElTableColumn>
        <ElTableColumn prop="title" label="品名"></ElTableColumn>
        <ElTableColumn prop="quantity" label="数量"></ElTableColumn>
        <ElTableColumn prop="price" label="价格"></ElTableColumn>
        <ElTableColumn label="数量Ex">
          <template #default="{ row }">
            <ElInputNumber v-model="row.quantity"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="价格Ex">
          <template #default="{ row }">
            <ElInputNumber v-model="row.price"></ElInputNumber>
          </template>
        </ElTableColumn>
        <ElTableColumn label="金额">
          <template #default="{ row }">
            <span>{{ (row.price * row.quantity).toFixed(2) }}</span>
          </template>
        </ElTableColumn>
      </ElTable>
      <ElDivider></ElDivider>
      <ElDescriptions>
        <ElDescriptionsItem label="经办人">{{ '张三' }}</ElDescriptionsItem>
        <ElDescriptionsItem label="审核人">{{ '李四' }}</ElDescriptionsItem>
      </ElDescriptions>
    </ElForm>
    <PractiseThreeSupport ref="support" @post-selected="postSelected"></PractiseThreeSupport>
    <ElButton v-if="0">测试</ElButton>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
import PractiseThreeSupport from './PractiseThreeSupport.vue'

export default defineComponent({
  name: 'PractiseThree',
  components: { PractiseThreeSupport },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      //整体单据 领域模型或行业模型 领域专家 一般有详情items
      /* bill:{
      
      }*/
      //子表里边会有一列指向主表的id
      sampleD: 'value',
      billModel: {
        billId: 'BI100',
        applier: 'zhangsan',
        supplier: '蒙牛',
        items: [
          {
            itemId: 1,
            title: '酸奶',
            price: 11,
            quantity: 10,
            billFk: 'BI100'
          },
          {
            itemId: 2,
            title: '纯牛奶',
            price: 3,
            quantity: 22,
            billFk: 'BI100'
          },
          {
            itemId: 3,
            title: '葡萄',
            price: 1,
            quantity: 2,
            billFk: 'BI100'
          },
          {
            itemId: 4,
            title: '奶酪',
            price: 1,
            quantity: 2,
            billFk: 'BI100'
          }
        ]
      },
      selected: [] as Array<any>
    }
  },
  computed: {
    /* sampleC() {
        return this.sampleD + "--";
      }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    removeItems() {
      // console.log(this.selected)
      // console.log(this.billModel.items)
      const cha = lodash.differenceBy(this.billModel.items, this.selected, 'title')
      console.log(cha)
      this.billModel.items = cha
      // const jiaoji = lodash.intersection([1, 2, 3], [2, 3, 4])
      // console.log(jiaoji)
      // const bingji = lodash.union([1, 2, 3], [2, 3, 4])
      // console.log(bingji)
      // const A = [1, 2, 3]
      // const B = [2, 3, 4]
      // const AchaB = lodash.difference(A, B)
      // console.log(AchaB)
      // const BchaA = lodash.difference(B, A)
      // console.log(BchaA)
    },
    selectionChange(rows: any) {
      this.selected = rows
    },
    summaryMethod() {
      let sum: number = 0
      for (let i = 0; i < this.billModel.items.length; i++) {
        sum = this.billModel.items[i].price * this.billModel.items[i].quantity + sum
      }
      // let sum1: number = 0
      // for (let i = 0; i < this.selected.length; i++) {
      //   sum1 = this.selected[i].price * this.selected[i].quantity + sum
      // }
      return ['', '总计:', sum, '']
    },
    open4add() {
      const support: any = this.$refs.support
      support.show()
    },
    postSelected(selectedMaterials: any) {
      console.log('接收到的数据', selectedMaterials)
      const formatted = selectedMaterials.map((e: any) => {
        return {
          itemId: 0,
          title: e.materialLable,
          price: e.suggestPrice,
          quantity: 1,
          billFk: ''
        }
      })
      console.log('接收到的数据', formatted)
      const all = lodash.unionBy(this.billModel.items, formatted, 'title')
      console.log(all)
      this.billModel.items = all
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
